<template>
  <div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <basic-opt :has_left="true">
      <template #search>
        <div class="opt-item">
          <el-input class="w-ipt" placeholder="请输入要查看的地区" suffix-icon="el-icon-search"
                    v-model="search.area" @keydown.enter="getSearchData" size="medium">
          </el-input>
        </div>
        <div class="opt-item">
          <el-button @click="getSearchData" size="medium">搜索</el-button>
        </div>
        <div class="opt-item">
          <reset-search></reset-search>
        </div>
      </template>
      <template #add>
        <div class="opt-item">
          <el-button @click="addForm" icon="el-icon-circle-plus-outline" type="primary" size="medium">添加地区</el-button>
        </div>
      </template>
    </basic-opt>

    <div class="table-box">
      <el-table :data="data" stripe row-key="id" :tree-props="{children: 'children'}" :row-style="rowStyle"
                :header-cell-style="header_cell_style" :max-height="table_max_height">
        <el-table-column prop="title" label="省份 (社区)">
          <template #default="scope">
            <span>{{ scope.row.title }}</span>
            <span :style="{'color' : (scope.row.is_community == '1' ? 'green' : 'red')}"
                  style="margin-left: 10px;">({{ scope.row.is_community == "1" ? "是" : "否" }})</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <el-button @click="addArea(scope.row)" type="info" plain size="mini">新增下级地区
            </el-button>
            <el-button @click="onEditData(scope.row)" type="success" plain size="mini">编辑
            </el-button>
            <el-button v-if="scope.row.parent_id != 0" @click="onDelData(scope.row)" type="danger" plain
                       size="mini">删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID">
        </el-table-column>
        <el-table-column prop="parent_id" label="父id">
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加地区 -->
    <compoment-drawer :drawer_name="drawer_name" :drawer_form="drawer_form" @getDrawerForm="getDrawerForm">
      <el-form ref="form" :model="form" label-width="120px">
        <el-scrollbar height="80vh" v-loading="form_loading" element-loading-text="正在进行请求,请稍后"
                      element-loading-spinner="el-icon-loading">
          <div class="form-flex">
            <el-form-item label="社区名字" prop="title">
              <el-input style="width: 300px;" v-model="form.title" placeholder="请输入社区名字"></el-input>
            </el-form-item>
            <el-form-item label="社区的父ID" :prop="ban_handle ? '' : 'parent_id'">
              <el-input style="width: 300px;" v-model="form.parent_id"
                        placeholder="请输入父id,默认省级parent_id为0" :disabled="ban_handle"></el-input>
            </el-form-item>
            <el-form-item label="是否社区" prop="is_community">
              <el-radio-group v-model="form.is_community">
                <el-radio-button label="1">是</el-radio-button>
                <el-radio-button label="2">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-scrollbar>
        <submit-reset @getChildNewForm="getNewForm" @getChildResetForm="resetForm('form')">
        </submit-reset>
      </el-form>
    </compoment-drawer>

    <!-- 删除数据确认 -->
    <delete-data :del_data_dialog="del_data_dialog" @getDelData="getDelData" @getCancelDelData="getCancelDelData">
      <el-descriptions class="margin-top" :column="1" size="medium" border>
        <el-descriptions-item>
          <template #label>
            id
          </template>
          {{ delData.id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            地区名称
          </template>
          {{ delData.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            父id
          </template>
          {{ delData.parent_id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            是否社区
          </template>
          <span
              :style="{'color' : (delData.is_community == '1' ? 'green' : 'red')}">{{
              delData.is_community == "1" ? "是" : "否"
            }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </delete-data>
  </div>
  <!--  mobile  -->
  <div class="mobile-wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <div class="mobile-search-box">
      <el-input class="w-ipt" placeholder="请输入要查看的地区" suffix-icon="el-icon-search"
                v-model="search.area" @keydown.enter="getSearchData" size="medium">
      </el-input>
      <el-button @click="getSearchData" size="medium">搜索</el-button>
    </div>
    <div class="moblie-table-box">
      <el-table :data="data" stripe row-key="id" :tree-props="{children: 'children'}" :row-style="rowStyle"
                :header-cell-style="header_cell_style" :max-height="mobile_table_max_height">
        <el-table-column prop="title" label="省份 (社区)">
          <template #default="scope">
            <span>{{ scope.row.title }}</span>
            <span :style="{'color' : (scope.row.is_community == '1' ? 'green' : 'red')}"
                  style="margin-left: 10px;">({{ scope.row.is_community == "1" ? "是" : "否" }})</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <page-component @pageChanged="onPageChanged"></page-component>
  </div>
</template>

<script>
import API from '@/api/index.js'
import mixin from '@/mixin.js'

export default {
  name: 'area',
  mixins: [mixin],
  data() {
    return {
      search: { // 搜索
        area: '',
      },

      // 表单
      drawer_name: '添加地区',
      form_loading: false, // 表单填写时加载
      form: {
        title: '',
        parent_id: '',
        is_community: 1
      },
      ban_handle: false,
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let self = this;
      self.loading = true;
      try {
        let params = {
          area: self.search.area,
          parent_id: ''
        }
        self.addPageInfo(params)
        let res = await API.areas(params.pageNumber, params.pageSize, params.parent_id, params.area)
        self.loading = false;
        self.onGotPageData(res)
      } catch (err) {
        self.loading = false;
      }
    },

    // 行为省份的样式
    rowStyle(row) {
      if (row.row.parent_id == 0) {
        return 'background-color: #f0f0f0;'
      }
      if (row.row.is_community == 1) {
        return 'color: green;'
      }
    },

    // 新增下级
    addArea(row) {
      let self = this;
      self.addForm();
      self.ban_handle = true;
      self.form = {
        title: '',
        parent_id: row.id,
        is_community: 1
      };
    },
    // 编辑数据
    onEditData(row) {
      let self = this;
      self.drawer_form = true;
      self.ban_handle = true;
      self.form = {
        id: row.id,
        title: row.title,
        parent_id: row.parent_id,
        is_community: row.is_community
      }
    },
    // 确定删除数据
    submitDeleteData(val) {
      let self = this;
      API.delArea(val).then(res => {
        console.log(res)
        self.getAreas();
        self.delSuccess();
      }).catch(err => {
        self.$message.error(err.response.data.message)
      })
    },
    // 提交表单
    getNewForm() {
      let self = this;
      self.form_loading = true;
      API.area(self.form).then(res => {
        console.log(res)
        self.submitSuccess();
        self.drawer_form = false;
        self.form_loading = false;
        self.initForm();
        self.getAreas();
      }).catch(err => {
        self.form_loading = false;
        self.$message.error(err.response.data.message);
      });
    },
    // 初始表单
    initForm() {
      let self = this;
      self.form = {
        title: '',
        parent_id: self.ban_handle ? self.form.parent_id : '',
        is_community: 1
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
